<template>
  <el-select
    v-model="child.echoModel"
    :remote-method="querySearch"
    clearable
    placeholder="请输入关键词"
    :loading="loading"
    filterable
    reserve-keyword
    remote
    @change="change"
  >
    <el-option
      v-for="option in child.echoData"
      :key="option.id"
      :value="option.id"
      :label="option.username"
    ></el-option>
  </el-select>
</template>

<script>
import { fuzzyGetUser } from "@/api/biz";

export default {
  name: 'Fuzzy',
  props: {
    onBackParent: {
      type: Function
    },
    child: {
      type: Object,
      default: function () {
        return { title: '模糊搜索用户信息' }
      }
    }
  },
  data () {
    return {
      loading: false
    }
  },
  mounted () { },
  methods: {
    change (val) {
      this.onBackParent(val)
    },
    querySearch (username) {
      if (username !== '') {
        this.loading = true
        fuzzyGetUser({ username: username }).then(response => {
          this.loading = false
          this.child.echoData = response.filter(item => {
            return item.username.toLowerCase().indexOf(username.toLowerCase()) > -1
          })
        });
      } else {
        this.child.echoData = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    ::v-deep .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}
</style>
